import Qt 4.7

Row {
    id: buttonsRate

    property int rating

    function buttonRate(selected_rating) {
        if(buttonsRate.children[selected_rating].state === "on") {
            rating = selected_rating + 1
        }
        else {
            resetStar()
        }
    }

    function resetStar() {
        rating = 0
    }

    Repeater {
        id: list

        model: ListModel {
            ListElement { description: "Very Easy" }
            ListElement { description: "Easy" }
            ListElement { description: "Medium" }
            ListElement { description: "Hard" }
            ListElement { description: "Very Hard" }
        }
        delegate: Rectangle{
            id: toggleswitch
            property bool on: true
            signal clicked
            radius: 5
            width: 45
            height: 35
            //state:"on"

            onClicked: {
                buttonRate(index)
            }

            state: {
                rating - 1 < index ? "on" : "off"
            }

            Text{
                id: hoverDescription
                font.pointSize: 8
                anchors.bottom: parent.top
                anchors.horizontalCenter: parent.horizontalCenter
                visible: mouseRegion.containsMouse === true || mouseRegion1.containsMouse ===true
                text: description
            }
            Image{
               id: pressStar
               width: 30
               height: 30
               anchors.centerIn: parent
               source: "star.jpg"
               smooth: true
               visible:true

                MouseArea {
                id: mouseRegion
                hoverEnabled: true
                anchors.fill: parent
                onClicked: {
                    toggleswitch.clicked()
                }
                }
            }


            Image{
                    id: yellowStar
                    source: "yellowStar.gif"
                    width: 30
                    height: 30
                    anchors.fill: pressStar
                    anchors.centerIn: parent
                    smooth: true
                    visible:true

                   MouseArea {
                        id: mouseRegion1
                        hoverEnabled: true
                        anchors.fill: parent
                        onClicked: {
                            toggleswitch.clicked()
                        }

                }
            }
            states: [
                    State {
                        name: "on"
                        PropertyChanges { target: yellowStar; z: 1 }
                        PropertyChanges { target: pressStar; z: 2 }
                        PropertyChanges { target: toggleswitch; on: true }
                    },
                    State {
                        name: "off"
                        PropertyChanges { target: pressStar; z: 1 }
                        PropertyChanges { target: yellowStar; z: 2 }
                        PropertyChanges { target: toggleswitch; on: false }
                    }
                ]
        }
    }
}

